<template>
  <div class="item-one" ref="itemOne">
    <div class="title">
      <span>提现记录查询</span>
      <div>
        <el-button
          type="primary"
          :disabled="exxxx"
          @click="WithdrawalRecordsExcel()"
          ><i class="el-icon-download"></i>导出</el-button
        >
        <el-button icon="el-icon-refresh"></el-button>
      </div>
    </div>
    <div class="container">
      <div class="screeningBox">
        <div class="leftBox">
           <div class="leftitem">
            <div class="block">
              <el-date-picker
                v-model="date"
                type="datetimerange"
                :picker-options="pickerOptions"
                value-format="yyyy-MM-dd HH:mm:ss"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                :clearable="false"
                :default-time="['00:00:00', '23:59:59']"
              >
              </el-date-picker>
              <el-select
                v-if="userinfo.rolesId != 5 && userinfo.rolesId != 6"
                v-model="channelType"
                placeholder="通道类型"
              >
                <el-option
                  v-for="(item, index) in channelslist"
                  :key="index"
                  :label="item.options"
                  :value="item.code"
                ></el-option>
              </el-select>
            </div>
          </div>
          <div class="leftitem" v-if="userinfo.rolesId != 4">
            <el-form ref="conditions" :model="conditions">
              <el-select
                v-if="
                  userinfo.rolesId == 1 ||
                  userinfo.rolesId == 8 ||
                  userinfo.rolesId == 9
                "
                class="servicelevel"
                v-model="conditions.servicelevel"
                placeholder="服务商级别"
                @change="servicelevel"
              >
                <el-option keys="1" label="一级服务商" :value="1"></el-option>
                <el-option keys="2" label="二级服务商" :value="2"></el-option>
              </el-select>
              <el-autocomplete
                v-if="
                  userinfo.rolesId == 1 ||
                  userinfo.rolesId == 8 ||
                  userinfo.rolesId == 2 ||
                  userinfo.rolesId == 9
                "
                class="servicename"
                v-model.trim="conditions.servicename"
                :fetch-suggestions="querySearch"
                placeholder="服务商名称"
                @select="serviceid"
              ></el-autocomplete>
              <el-autocomplete
                v-if="userinfo.rolesId != 5"
                class="BDname"
                v-model.trim="conditions.BDname"
                :fetch-suggestions="BDname"
                placeholder="业务经理"
                @select="BDid"
              ></el-autocomplete>
            </el-form>
          </div>
        </div>
        <div class="rightBox">
          <div class="rightitem" v-if="userinfo.rolesId != 5">
            <el-form ref="conditions" :model="conditions" label-width="80px">
              <el-input
                class="merchants"
                v-model.trim="WithdrawalRecordMerchant"
                placeholder="商户号/商户名"
              ></el-input>
              <el-input
                class="merchants"
                v-model.trim="WithdrawalRecordMember"
                placeholder="账户id/账户名称"
              ></el-input>
            </el-form>
          </div>
          <div class="rightitem" v-if="userinfo.rolesId != 5">
            <el-form ref="conditions" :model="conditions" label-width="80px">
              <el-input
                class="merchants"
                v-model.trim="WithdrawalOrderNumber"
                placeholder="提现订单号"
              ></el-input>
              <el-input
                class="merchants"
                v-model.trim="ChannelWithdrawalOrderNumber"
                placeholder="通道提现订单号"
              ></el-input>
            </el-form>
          </div>
    
          <div class="rightitem">
            <el-button icon="el-icon-search" type="primary" @click="soso"
              >搜索</el-button
            >
            <el-button icon="el-icon-refresh" type="primary" @click="reset"
              >重置</el-button
            >
          </div>
        </div>
      </div>

      <div class="tableBox">
        <el-table
          ref="multipleTable"
          :data="merchantarr"
          tooltip-effect="dark"
          style="width: 100%"
          @selection-change="handleSelectionChange"
          stripe
          :header-cell-style="tableHeaderColor"
          v-loading="loading"
        >
          <el-table-column type="selection" width="55"></el-table-column>
          <el-table-column
            align="center"
            type="index"
            label="序号"
          ></el-table-column>
          <el-table-column
            align="center"
            width="160"
            label="商户号?商户名称"
            :render-header="renderheader"
            ><template slot-scope="scope">
              <div>{{ scope.row.mchNo }}</div>
              <div>
                {{ scope.row.mchName }}
              </div>
            </template></el-table-column>
          <el-table-column
            width="250"
            align="center"
            label="渠道单号"
            :render-header="renderheader"
            ><template slot-scope="scope">
              <div style="display:flex;align-items:center;">{{ scope.row.withdrawTradeNo }}
                   <i
                   style="margin-left:5px;"
                  class="el-icon-copy-document iconmove"
                  @click="copymerchantNoFunc(scope.row.withdrawTradeNo)"
                  v-clipboard:copy="copymerchantNo"
                  v-clipboard:success="onCopy"
                  v-clipboard:error="onError"
                /> 
              </div>
            </template></el-table-column
          >
          <el-table-column
            width="180"
            align="center"
            label="提现时间?完成时间"
            :render-header="renderheader"
            ><template slot-scope="scope">
              <div>{{ scope.row.createTime }}</div>
              <div>
                {{ scope.row.endTime }}
              </div>
            </template></el-table-column
          >
          <el-table-column
            align="center"
            :render-header="renderheader"
            label="提现状态"
            width="120"
          >
          <template slot-scope="scope">
              <div>
                <span
                  v-if="scope.row.trsStatus == '提现成功' || scope.row.trsStatus == '受理成功'"
                  class="green">{{ scope.row.trsStatus }}</span>
                <span
                  v-else-if="scope.row.trsStatus == '提现失败'"
                  class="reds">{{ scope.row.trsStatus }}</span>
                <span
                  v-else
                  class="hui">{{ scope.row.trsStatus }}</span>
              </div>
          </template>
          </el-table-column>
          <el-table-column
            align="center"
            prop="trsTotalFee"
            label="提现金额?提现手续费"
            :render-header="renderheader"
            width="160"
          >
            <template slot-scope="scope">
                <p> {{ scope.row.trsTotalFee }} </p>
                <p> {{ scope.row.trsFee }} </p>
            </template>
          </el-table-column>
          <!-- <el-table-column
            align="center"
            prop="trsFee"
            label="提现手续费"
          ></el-table-column> -->
          <el-table-column
            align="center"
            prop="acctNo"
            label="开户银行"
            width="160"
          ></el-table-column>
          <el-table-column
            width="140"
            align="center"
            label="账户名称?账户id"
            :render-header="renderheader"
            ><template slot-scope="scope">
              <div>{{ scope.row.memberName }}</div>
              <div>
                {{ scope.row.memberNo }}
              </div>
            </template></el-table-column>
          <el-table-column
            align="center"
            prop="channelName"
            label="通道名称?通道商户号"
            width="180"
            :render-header="renderheader"
          >
           <template slot-scope="scope">
             <p> {{ scope.row.channelName }} </p>
             <p> {{ scope.row.channelAcctNo }} </p>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            fixed="right"
            label="操作"
            width="120"
          >
            <template slot-scope="scope">
              <el-button
                type="text"
                size="small"
                @click="joininfo(scope.row.id)"
                >详细</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <div class="pagination">
          <el-pagination
            background
            @current-change="handleCurrentChange"
            @size-change="sizechange"
            :page-size="10"
            layout="total, sizes, prev, pager, next, jumper"
            :total="combined"
            :current-page.sync="cur_page"
          ></el-pagination>
        </div>
      </div>
      <br />
      <br />
    </div>
  </div>
</template>

<script>
import {
  getservice,
  merchantlist,
  getBD,
  merchantexcel,
  getlabelTagList,
  getDimensionTagList,
  dictionarylist,
  APIWithdrawalRecordsList,
  APIWithdrawalRecordsExcel,
} from "@/api/api";
export default {
  name: "baseform",
  data: function () {
    return {
      copymerchantNo:'',

      WithdrawalRecordMerchant: "",
      WithdrawalRecordMember: "",
      WithdrawalOrderNumber: "",
      ChannelWithdrawalOrderNumber: "",
      type: "",
      channelType: "",
      exxxx: false,
      tableData: [],
      cur_page: 1,
      cur_size: 10,
      multipleSelection: [],
      visible: false,
      servicearr: [],
      merchantarr: [],
      combined: 10,
      pageCount: "",
      channelslist: [],
      datainfo: {
        totalFee: "",
        fee: "",
        total: "",
        balance: "",
        agent1Profit: "",
        agent2Profit: "",
        bdProfit: "",
      },
      userinfo: "",
      date: "",
      loading: true,
      conditions: {
        servicelevel: "",
        servicename: "",
        stardate: "",
        enddate: "",
        serviceid: "",
        aisle: "",
        shopno: "",
        BDname: "",
        keywords: "",
      },
      dimension: "", //选择维度
      tagname: "", //标签名
      label_all: [], //标签模糊查询
      tagId: "",
      pickerOptions: {
        // 设置不能超过未来时间
        // disabledDate: (time) => {
        //   // 设置可选择的日期为今天之后的一个月内
        //   const curDate = (new Date()).getTime()
        //   // 这里算出一个月的毫秒数,这里使用30的平均值,实际中应根据具体的每个月有多少天计算
        //   const day = 31 * 24 * 3600 * 1000
        //   const dateRegion = curDate - day
        //   return time.getTime() > Date.now() - 8.64e7 ||
        //   time.getTime() < dateRegion
        // }
        // 设置不能超过当天的23:59:59
        disabledDate(time) {
          let nowDate = new Date();
          let date = {
            year: nowDate.getFullYear(),
            month: nowDate.getMonth() + 1,
            date: nowDate.getDate(),
          };
          let timeDate =
            date.year + "-" + date.month + "-" + date.date + " 23:59:59";
          let times = new Date(timeDate).getTime();
          return time.getTime() > times;
        },
      },
    };
  },
  created() {
    this.defaultTime();
    this.WithdrawalRecordsList();
    this.dictionarylist();
    this.userinfo = JSON.parse(sessionStorage.getItem("userInfo"));
    this.$store.dispatch("getNewNum", 6);
    // if(this.userinfo.rolesId == 1){
    //   this.conditions.servicelevel = 1
    //   this.servicelevel('1')
    // }
    // if(this.userinfo.rolesId == 2){
    //   this.conditions.servicelevel = 2
    //   this.servicelevel('2')
    // }else
    if (this.userinfo.rolesId == 3) {
      this.getBD(this.userinfo.fid);
    }
    // this.dimension_menu(5)
  },
  methods: {
    copymerchantNoFunc(item){
      this.copymerchantNo = item.replace(/^\s+|\s+$/g, "");
    },
        onCopy: function (e) {
      this.$message({
        message: "复制成功",
        type: "success",
      });
      console.log("复制成功");
    },
    onError: function (e) {
      this.$message.error("复制失败");
      console.log("复制失败");
    },
    defaultTime() {
      const start = new Date();
      start.setTime(start.getTime());
      const year = start.getFullYear();
      let month = start.getMonth() + 1;
      if (month < 10) {
        month = "0" + month;
      }
      let date = start.getDate();
      if (date < 10) {
        date = "0" + date;
      }
      const date1 = year + "-" + month + "-" + date + " " + "00:00:00";
      const date2 = year + "-" + month + "-" + date + " " + "23:59:59";
      this.date = [date1, date2];
    },
    // 跳转对账单
    joinbill() {
      this.$router.push("/bill");
    },
    // 获取所有通道type
    dictionarylist() {
      dictionarylist({ type: "channelType", status: 0 }).then((res) => {
        if (res.code == 405) {
          sessionStorage.removeItem("token");
          this.$router.push("/login");
        } else {
          this.channelslist = res.data;
        }
      });
    },
    //修改thead 背景色
    tableHeaderColor({ row, column, rowIndex, columnIndex }) {
      if (rowIndex === 0) {
        return "background-color: #F0F0F0;font-weight: 500;font-size:14px;color:#000;";
      }
    },
    joininfo(val) {
      this.$router.push({
        path: "/WithdrawalDetails",
      });
        sessionStorage.setItem("Withdrawal_id", JSON.stringify(val));
        console.log('=========',sessionStorage.getItem("Withdrawal_id"));
      // this.$router.push({ path: "/WithdrawalDetails",
      //     query: {
      //           id: val,
      //       }
      // });
    },
    // 刷新
    refresh() {
      this.$router.go({
        path: 0,
        query: {
          t: Date.now(),
        },
      });
    },
    renderheader(h, { column, $index }) {
      return h("span", {}, [
        h("span", {}, column.label.split("?")[0]),
        h("br"),
        h("span", {}, column.label.split("?")[1]),
      ]);
    },
    // 分页导航
    handleCurrentChange(val) {
      if (this.conditions.servicelevel == 1) {
        this.WithdrawalRecordsList("1");
      } else if (this.conditions.servicelevel == 2) {
        this.WithdrawalRecordsList("2");
      } else {
        this.WithdrawalRecordsList("2");
      }
      this.cur_page = val;
      this.$nextTick(() => {
        document.querySelectorAll(".content")[0].scrollTop = "0";
      });
    },
    // 分页数量
    sizechange(val) {
      this.cur_size = val;
      if (this.conditions.servicelevel == 1) {
        this.WithdrawalRecordsList("1");
      } else if (this.conditions.servicelevel == 2) {
        this.WithdrawalRecordsList("2");
      } else {
        this.WithdrawalRecordsList("2");
      }

      this.$nextTick(() => {
        document.querySelectorAll(".content")[0].scrollTop = "0";
      });
    },
    //多选框
    handleSelectionChange(val) {
      console.log(val);
      this.multipleSelection = val;
    },
    //  重置
    reset() {
      (this.date = ""),
        (this.WithdrawalRecordMerchant = ""),
        (this.WithdrawalRecordMember = ""),
        (this.WithdrawalOrderNumber = ""),
        (this.ChannelWithdrawalOrderNumber = ""),
        (this.conditions.servicelevel = "");
      this.conditions.servicename = "";
      this.conditions.stardate = "";
      this.conditions.enddate = "";
      this.conditions.serviceid = "";
      this.wx1code = "";
      this.cur_page = 1;
      this.conditions.BDname = "";
      this.conditions.keywords = "";
      this.conditions.BDid = "";
      this.channelType = "";
      this.type = "";
      this.dimension = "";
      this.tagname = "";
      this.tagId = "";
      if (this.userinfo.rolesId == 2) {
        this.conditions.servicelevel = 2;
      }
    },
    // 业务经理
    BDname(queryString, cb) {
      let BDarr = this.BDarr;
      let results = queryString
        ? BDarr.filter(this.createFilter(queryString))
        : BDarr;
      // 调用 callback 返回建议列表的数据
      cb(results);
    },
    BDid(item) {
      this.conditions.BDid = item.id;
    },
    serviceid(item) {
      this.conditions.serviceid = item.id;
      this.getBD(item.id);
    },
    getBD(id) {
      this.BDarr = [];
      getBD({ agentid: id }).then((res) => {
        console.log(res);
        for (var i = 0; i < res.data.rows.length; i++) {
          this.BDarr.push({
            value: res.data.rows[i].name,
            id: res.data.rows[i].id,
          });
        }
      });
    },
    // 搜索
    soso() {
      this.loading = true;
      this.cur_page = 1;
      if (!this.conditions.servicename) {
        this.conditions.serviceid = "";
      }
      if (!this.conditions.BDname) {
        this.conditions.BDid = "";
      }
      if (this.conditions.servicelevel == 1) {
        this.WithdrawalRecordsList("1");
      } else if (this.conditions.servicelevel == 2) {
        this.WithdrawalRecordsList("2");
      } else {
        this.WithdrawalRecordsList("2");
      }
    },
    // 服务商名称
    querySearch(queryString, cb) {
      let sosolist = {};
      sosolist = {
        page: 1,
        size: 20,
        type: this.conditions.servicelevel,
        keywords: this.conditions.servicename,
      };
      getservice(sosolist).then((res) => {
        // console.log(res);
        if (res.code == 405) {
          sessionStorage.removeItem("token");
          this.$router.push("/login");
        } else {
          this.servicearr = [];
          for (var i = 0; i < res.data.rows.length; i++) {
            this.servicearr.push({
              value: res.data.rows[i].agentname,
              id: res.data.rows[i].id,
            });
          }
          let results = queryString
            ? this.servicearr.filter(this.createFilter(queryString))
            : this.servicearr;
          // 调用 callback 返回建议列表的数据
          cb(results);
        }
      });
    },
    createFilter(queryString) {
      return (restaurant) => {
        return (
          restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) !==
          -1
        );
      };
    },
    // 服务商级别
    servicelevel(val) {
      this.servicearr = [];
      getservice({
        type: val,
      }).then((res) => {
        for (var i = 0; i < res.data.rows.length; i++) {
          this.servicearr.push({
            value: res.data.rows[i].agentname,
            id: res.data.rows[i].id,
          });
        }
      });
    },

    // 商户交易统计
    WithdrawalRecordsList(level) {
      let sosolist = (sosolist = {
        page: this.cur_page,
        size: this.cur_size,
        startCreateTime: this.date[0],
        finishCreateTime: this.date[1],
        bdId: this.conditions.BDid,
        channelType: this.channelType,
        merKeyWords: this.WithdrawalRecordMerchant,
        withdrawTradeNo: this.WithdrawalOrderNumber,
        channelWithdrawNo: this.ChannelWithdrawalOrderNumber,
        memKeyWords: this.WithdrawalRecordMember,
      });
      if (level == 1) {
        sosolist.agent1Id = this.conditions.serviceid;
      } else if (level == 2) {
        sosolist.agent2Id = this.conditions.serviceid;
      }
      APIWithdrawalRecordsList(sosolist).then((res) => {
        if (res.code == 405) {
          sessionStorage.removeItem("token");
          this.$router.push("/login");
        } else if (res.code == 200) {
          this.merchantarr = res.data;
          this.combined = res.pageInfo.recordCount;
          this.pageCount = res.pageInfo.pageCount;
          this.loading = false;
        } else if (res.code == 500) {
          this.$message.error(res.message);
        }
      });
    },
    //维度查询标签
    dimension_menu(v) {
      this.label_all = [];
      getDimensionTagList({
        roleId: v,
      }).then((res) => {
        if (res.code == 405) {
          sessionStorage.removeItem("token");
          this.$router.push("/login");
        } else if (res.code == 200) {
          for (var i = 0; i < res.data.length; i++) {
            this.label_all.push({
              value: res.data[i].tagName,
              id: res.data[i].tagId,
            });
          }
        } else {
          this.$message.error(res.message);
        }
      });
    },
    //标签模糊
    querySearch_tag(queryString, cb) {
      // let servicearr = this.label_all;
      // let results = queryString
      //   ? servicearr.filter(this.createFilter(queryString))
      //   : servicearr;
      // // 调用 callback 返回建议列表的数据
      // cb(results);
      let that = this;
      getDimensionTagList({
        roleId: 5,
        tagwords: this.tagname,
      }).then((res) => {
        if (res.code == 405) {
          sessionStorage.removeItem("token");
          that.$router.push("/login");
        } else if (res.code == 200) {
          that.label_all = [];
          for (var i = 0; i < res.data.length; i++) {
            that.label_all.push({
              value: res.data[i].tagName,
              id: res.data[i].tagId,
            });
          }
          let servicearr = that.label_all;
          let results = queryString
            ? servicearr.filter(that.createFilter(queryString))
            : servicearr;
          // 调用 callback 返回建议列表的数据
          cb(results);
        } else {
          that.$message.error(res.message);
        }
      });
    },
    serviceid_tag(item) {
      console.log(item);
      this.tagId = item.id;
    },
    // 导出
    WithdrawalRecordsExcel() {
      this.eeeex = true;
      let i = 0;
      let time = setInterval(() => {
        if (i == 60) {
          loading.close();
          this.$message.error("请求超时");
          clearInterval(time);
        } else {
          i++;
        }
      }, 1000);
      const loading = this.$loading({
        lock: true,
        text: "Loading",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)",
      });
      let level = this.conditions.servicelevel;
      let sosolist = (sosolist = {
        page: this.cur_page,
        size: this.cur_size,
        startCreateTime: this.date[0],
        finishCreateTime: this.date[1],
        bdId: this.conditions.BDid,
        channelType: this.channelType,
        merKeyWords: this.WithdrawalRecordMerchant,
        withdrawTradeNo: this.WithdrawalOrderNumber,
        channelWithdrawNo: this.ChannelWithdrawalOrderNumber,
        memKeyWords: this.WithdrawalRecordMember,
      });
      if (level == 1) {
        sosolist.agent1Id = this.conditions.serviceid;
      } else if (level == 2) {
        sosolist.agent2Id = this.conditions.serviceid;
      }
      APIWithdrawalRecordsExcel(sosolist).then((res) => {
        console.log("====", res);
        if (res.code == 405) {
          clearInterval(time);
          sessionStorage.removeItem("token");
          this.$router.push("/login");
          loading.close();
          this.exxxx = false;
        } else if (res.code == 200) {
          clearInterval(time);
          let elink = document.createElement("a");
          elink.download = "提现记录明细.xls";
          elink.href = res.data.replace("http://", "https://");
          elink.click();
          loading.close();
          this.exxxx = false;
        } else {
          clearInterval(time);
          this.$message.error(res.message);
          loading.close();
          this.exxxx = false;
        }
      });
    },
  },
};
</script>
<style scoped lang='less'>
.iconmove{
  cursor:pointer;
}
.green {
  background: #97c05c;
  color: #fff;
  padding: 0 5px;
  border-radius: 10px;
}
.reds {
  background: #d3362f;
  color: #fff;
  padding: 0 5px;
  border-radius: 10px;
}
.hui {
  background: #888888;
  color: #fff;
  padding: 0 5px;
  border-radius: 10px;
}
.title {
  background: #fff;
  padding: 10px 10px;
  font-size: 18px;
  font-weight: 500;
  display: flex;
  justify-content: space-between;
}
.name {
  width: 25%;
}
.screeningBox {
  width: 100%;
  display: flex;
}
.leftBox,
.rightBox {
  width: 50%;
  padding: 0 15px;
  box-sizing: border-box;
}
.leftBox > .leftitem {
  margin-bottom: 15px;
  width: 100%;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.rightBox > .rightitem {
  margin-bottom: 15px;
}
.merchants {
  width: 50%;
}
.tableBox {
  margin-top: 20px;
}
.servicename {
  width: 43%;
}
.servicename1 {
  width: 60%;
}
.servicelevel {
  width: 23.5%;
}
.width20 {
  width: 20%;
}
.red {
  color: #f9607d;
}
.blue {
  color: #01aaef;
}
.stitle {
  padding: 5px 0;
  font-size: 18px;
}
.statistical {
  width: 100%;
  display: flex;
  justify-content: space-around;
  align-items: center;
  background: #00152a;
  color: #fff;
  padding: 12px;
  box-sizing: border-box;
  .statisticalitem {
    flex: 1;
    text-align: center;
    border-right: 1px solid rgba(255, 255, 255, 0.445);
    font-size: 13px;
    line-height: 180%;
    &:nth-last-child(1) {
      border-right: none;
    }
    .red {
      color: #f9607d;
      font-size: 18px;
    }
    .blue {
      color: #01aaef;
      font-size: 18px;
    }
  }
}
// .BDname{
//   width: 20%;
// }
</style>